<template>
  <div class="page_rate">
    <van-nav-bar
      title="发表评价"
      left-arrow
      @click-left="$router.back()"
    />
    <com-job-item
      :id="6"
      :keyWord="'wageSettlement'"
      :jobItem ="needObj"
      :routeName="$route.name"
    ></com-job-item>

    <van-form @submit="onSubmit">
      <div v-for="(item, index) in dataList" :key="index">
        <van-divider
          :style="{ color: '#323233', borderColor: '#BCBCBC', padding: '10px 66px 0', marginBottom: '10px', backgroundColor: '#FFFFFF', fontWeight: 'bold'}"
        >
          {{item.title}}
        </van-divider>
        <van-field autocomplete="off" name="rating" label="评分">
          <template #input>
            <van-slider v-model="item.rating"
                        active-color="#FFD21E"
                        :min="-5" :max="5"
            >
              <template #button>
                <div class="custom-button">{{item.rating}}</div>
              </template>
            </van-slider>
          </template>
        </van-field>
        <van-field autocomplete="off"
          v-model="item.rating_description"
          name="rating_description"
          label="评价说明"
          placeholder="请填写说明"
          type="textarea"
          rows="1"
          autosize
        />
      </div>

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
  import comJobItem from '../../components/comJobItem';
  import {obj} from '../../constants/comUtils';
  export default {
    name: 'rate',
    components: {
      comJobItem,
    },

    data(){
      return {
        needObj: obj,
        jobId: '',

        // 设计一个动态的v-mode
        dataList:[
          {
            title:'请对用人企业评价',
            id:'1',
            rating: 0,
            rating_description: '',
          },
          {
            title:'请对招聘企业评价',
            id:'2',
            rating: 0,
            rating_description: '',
          },
          {
            title:'请对近聘平台评价',
            id:'3',
            rating: 0,
            rating_description: '',
          },
        ],
      }
    },
    created(){
      if (this.$route.params.id){
        this.jobId = this.$route.params.id
      } else {
        this.$router.back()
      }
    },

    methods: {
      onSubmit(values) {
        console.log('submit', values);
      },
    }

  }
</script>

<style lang="scss" scoped>
  .page_rate{
    width: 100%;
    background-color: #FFFFFF;
    .custom-button {
      width: 26px;
      color: #fff;
      font-size: 10px;
      line-height: 20px;
      text-align: center;
      /*font-weight: bold;*/
      background-color: #FFD21E;
      border-radius: 100px;
    }

  }
</style>
